<!--
 * @轮子的作者: 轮子哥
 * @Date: 2023-08-29 15:34:18
 * @LastEditTime: 2023-12-12 10:05:59
-->
<template>
    <div class="inputDom" :style="myStyles">
        <input v-if="isNumber == 0" class="myInput" :placeholder="hits" v-model="inputValue" :class="isHit ? 'pd3' : ''"
            :style="leftText != '' ? { paddingRight: '45px', ...inputStyle } : inputStyle" :disabled="disabled">
        <input v-if="isNumber == 1" class="myInput" :placeholder="hits" v-model="inputValue" :class="isHit ? 'pd3' : ''"
            :style="leftText != '' ? { paddingRight: '45px', ...inputStyle } : inputStyle" @input="formatInput1"
            ref="input1" :disabled="disabled">
        <input v-if="isNumber == 2" class="myInput" :placeholder="hits" v-model="inputValue" :class="isHit ? 'pd3' : ''"
            :style="leftText != '' ? { paddingRight: '45px', ...inputStyle } : inputStyle" @input="formatInput2"
            ref="input2" :disabled="disabled" @blur="blurReturn" @focus="focusReturn">
        <div class="leftText">{{ leftText }}</div>
        <!-- <div class="close" v-show="isBlur" @click.stop="reset">×</div> -->
    </div>
</template>
    
<script>

export default {
    name: 'CommonInput',
    emits: ['returnData', 'blurReturn'],
    components: {
    },
    props: {
        isShowLeftText: {
            default: false,
            type: Boolean
        },
        isNumber: {
            default: 0,
            type: Number
        },
        hit: {
            default: '',
            type: String
        },
        value: [String, Number],
        leftText: {
            default: '',
            type: String
        },
        myStyles: {
            default: { width: '160px' }
        },
        inputStyle: {
            default: {  }
        },
        isMust: {
            default: false,
            type: Boolean
        },
        mustHit: {
            default: '',
            type: String
        },
        max: {
            default: 9999999999,
            type: Number
        },
        isResetDefault:Boolean,
        disabled: Boolean,
        forceReset:Boolean
    },
    data() {
        return {
            inputValue: this.value == null ? '' : this.value,
            hits: this.hit,
            isHit: false,
            isBlur: false
        }
    },
    mounted() {
    },
    methods: {
        inputReturn() {
            if (this.isMust && !String(this.inputValue)?.trim()) {
                this.hits = this.mustHit
                this.isHit = true
                return false;
            }
            return true
        },
        blurReturn() {
            this.isBlur = false
            return this.$emit('blurReturn', this.isNumber > 0 ? this.inputValue == '' ? '' : Number(String(this.inputValue).replace(/[^0-9.]/g, '')) : this.inputValue)
        },
        focusReturn() {
            this.isBlur = true
        },
        reset() {
            this.inputValue = ''
        },
        resetDefault() {
            this.inputValue = this.value
        },
        formatInput1(e) {
            // 保存输入前的光标位置
            let selectionStart = this.$refs.input1.selectionStart;
            // 格式化输入值
            let targetValue = e.target.value
            if (Number(targetValue.replace(/[^0-9]/g, '')) > this.max) {
                targetValue = String(this.max);
            }
            let formatted = targetValue
                .replace(/[^0-9]/g, '')
                .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            // 赋值格式化后的结果
            this.inputValue = formatted;
            if (e.inputType === 'deleteContentBackward') {
                this.$nextTick(() => {
                    // 恢复光标位置
                    this.$refs.input1.selectionStart = selectionStart;
                    this.$refs.input1.selectionEnd = selectionStart;
                });
            }
        },
        formatInput2(e) {
            // 保存输入前的光标位置
            let selectionStart = this.$refs.input2.selectionStart;
            // 格式化输入值
            let targetValue = e.target.value
            if (Number(targetValue.replace(/[^0-9.]/g, '')) > this.max) {
                targetValue = String(this.max);
            }
            let formatted = targetValue
                .replace(/[^0-9.]/g, '')
                .replace(/^(\d+\.?\d?)(\d{2})\d*$/, '$1$2')
                .replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            // 赋值格式化后的结果
            this.inputValue = formatted;
            if (e.inputType === 'deleteContentBackward') {
                this.$nextTick(() => {
                    // 恢复光标位置
                    this.$refs.input2.selectionStart = selectionStart;
                    this.$refs.input2.selectionEnd = selectionStart;
                });
            }
        }
    },
    watch: {
        inputValue: {
            handler() {
                this.isHit = false
                return this.$emit('returnData', this.isNumber > 0 ? this.inputValue == '' ? '' : Number(String(this.inputValue).replace(/[^0-9.]/g, '')) : this.inputValue)
            }
        },
        value() {
            if (this.inputValue == '' ||this.isResetDefault) {
                this.inputValue = this.value
            }
        },
        forceReset(){
            this.inputValue = this.value
        }
    },
    computed: {
    }

}
</script>
    
<style scoped>
.inputDom {
    display: flex;
    align-items: center;
    position: relative;
}

.myInput {
    outline: none;
    height: 20px;
    border: 1px solid rgb(220, 223, 230);
    padding-left: 8px;
    padding-right: 20px;
    border-radius: 3px;
    font-size: 12px;
    position: relative;
    margin: 1px;
    width: 100%;
}

.myInput:focus {
    border: 1px solid #6698ff;
}

.leftText {
    font-size: 12px;
    color: #999;
    position: absolute;
    right: 12px;
}

.pd3 {
    padding-left: 15px;
    padding-right: 10px;
    color: red;
    border: 1px solid red;
}

.pd3::placeholder {
    color: red;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: none;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    color: #999999;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #999999;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #999999;
}

.close {
    background: #2196F3;
    border-radius: 100%;
    min-width: 13px;
    position: absolute;
    font-weight: 600;
    font-size: 12px;
    color: white;
    min-height: 13px;
    line-height: 13px;
    text-align: center;
    right: 20px;
}
</style>